<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.x1{
				width: 800px;
				/* 当块元素没有设置高度时,默认高度为内容高度 */
				background-color: pink;
				/* 清除浮动 当子元素全部浮动的情况下,一定记得给父元素清除浮动 */
				overflow: auto;
			}
			.x2{
				width: 200px;
				height: 200px;
				background-color: green;
				/* 浮动会导致父元素坍塌 */
				float: right;
			}
			.x3{
				width: 300px;
				height: 300px;
				background-color: gold;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="x1">
		<div class="x2"></div>
		<div class="x3"></div>
		</div>
	</body>
</html>
